<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>社交网站顶部导航各种场景</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    /* 基础样式 */
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      margin: 0;
      padding: 0;
      height: 100vh;
      display: flex;
      flex-direction: column;
      background-color: #f5f5f5;
    }
    
    .content {
      flex: 1;
      overflow-y: auto;
      padding: 16px;
      color: #666;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    /* 顶部导航通用样式 */
    .top-nav {
      height: 56px;
      display: flex;
      align-items: center;
      padding: 0 16px;
      background-color: white;
      border-bottom: 1px solid #eee;
      position: relative;
      z-index: 100;
    }
    
    .nav-title {
      font-size: 18px;
      font-weight: 600;
      color: #333;
      margin: 0;
    }
    
    .nav-btn {
      background: none;
      border: none;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #333;
      font-size: 20px;
    }
    
    .nav-btn:hover {
      background-color: #f0f0f0;
    }
    
    .nav-logo {
      font-size: 20px;
      font-weight: 700;
      color: #4263EB;
    }
    
    /* 搜索栏样式 */
    .search-container {
      flex: 1;
      margin: 0 12px;
    }
    
    .search-bar {
      width: 100%;
      height: 36px;
      background-color: #f0f0f0;
      border-radius: 18px;
      display: flex;
      align-items: center;
      padding: 0 16px;
      font-size: 14px;
      color: #999;
    }
    
    .search-bar i {
      margin-right: 8px;
    }
    
    /* 标签页样式 */
    .nav-tabs {
      display: flex;
      width: 100%;
      overflow-x: auto;
      scrollbar-width: none;
    }
    
    .nav-tabs::-webkit-scrollbar {
      display: none;
    }
    
    .tab-item {
      padding: 16px;
      font-size: 16px;
      font-weight: 500;
      color: #666;
      white-space: nowrap;
      border-bottom: 2px solid transparent;
    }
    
    .tab-item.active {
      color: #4263EB;
      border-bottom-color: #4263EB;
    }
    
    /* 通知徽章 */
    .badge {
      position: absolute;
      top: 10px;
      right: 12px;
      background-color: #ff3b30;
      color: white;
      border-radius: 50%;
      width: 18px;
      height: 18px;
      font-size: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: normal;
    }
    
    .badge.dot {
      width: 8px;
      height: 8px;
      top: 15px;
      right: 17px;
    }
    
    .btn-with-badge {
      position: relative;
    }
    
    /* 风格切换器 */
    .style-switcher {
      position: fixed;
      top: 70px;
      right: 10px;
      z-index: 1001;
      background: white;
      border-radius: 20px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
      overflow: hidden;
    }
    
    .style-btn {
      border: none;
      background: none;
      padding: 6px 12px;
      cursor: pointer;
      font-size: 12px;
    }
    
    .style-btn.active {
      background-color: #4263EB;
      color: white;
    }
    
    /* 场景特定样式 */
    /* 1. 首页带Logo */
    #scene1 .top-nav {
      justify-content: space-between;
    }
    
    #scene1 .nav-logo {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    #scene1 .nav-logo i {
      font-size: 24px;
    }
    
    /* 2. 二级页面带返回 */
    #scene2 .top-nav {
      justify-content: space-between;
    }
    
    #scene2 .left-section {
      display: flex;
      align-items: center;
      gap: 16px;
    }
    
    /* 3. 搜索优先页面 */
    #scene3 .top-nav {
      justify-content: space-between;
    }
    
    #scene3 .left-btns, #scene3 .right-btns {
      display: flex;
      gap: 8px;
    }
    
    /* 4. 标签分类页面 */
    #scene4 .top-nav {
      height: auto;
      flex-direction: column;
      padding: 0;
    }
    
    #scene4 .tabs-container {
      width: 100%;
      position: relative;
    }
    
    #scene4 .tab-actions {
      position: absolute;
      right: 16px;
      top: 12px;
    }
    
    /* 5. 聊天页面 */
    #scene5 .top-nav {
      justify-content: space-between;
    }
    
    #scene5 .contact-info {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    
    #scene5 .contact-name {
      font-weight: 600;
      font-size: 16px;
    }
    
    #scene5 .contact-status {
      font-size: 12px;
      color: #666;
    }
    
    #scene5 .avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      object-fit: cover;
    }
    
    #scene5 .right-actions {
      display: flex;
      gap: 8px;
    }
    
    /* 6. 深色模式 */
    #scene6 {
      background-color: #121212;
    }
    
    #scene6 .content {
      background-color: #121212;
      color: #aaa;
    }
    
    #scene6 .top-nav {
      background-color: #1e1e1e;
      border-bottom-color: #333;
    }
    
    #scene6 .nav-btn, #scene6 .nav-title, #scene6 .search-bar, #scene6 .contact-name, #scene6 .contact-status {
      color: #ddd;
    }
    
    #scene6 .search-bar {
      background-color: #333;
    }
    
    #scene6 .style-switcher {
      background-color: #1e1e1e;
    }
    
    #scene6 .tab-item {
      color: #999;
    }
    
    #scene6 .tab-item.active {
      color: #58a9ff;
      border-bottom-color: #58a9ff;
    }
    
    /* 7. 带通知的页面 */
    #scene7 .top-nav {
      justify-content: space-between;
    }
    
    /* 8. 编辑模式 */
    #scene8 .top-nav {
      justify-content: space-between;
    }
    
    #scene8 .save-btn {
      color: #4263EB;
      font-size: 16px;
      font-weight: 500;
    }
  </style>
</head>
<body>
  <!-- 场景切换器 -->
  <div class="style-switcher">
    <button class="style-btn active" data-scene="scene1">首页</button>
    <button class="style-btn" data-scene="scene2">二级页</button>
    <button class="style-btn" data-scene="scene3">搜索页</button>
    <button class="style-btn" data-scene="scene4">标签页</button>
    <button class="style-btn" data-scene="scene5">聊天页</button>
    <button class="style-btn" data-scene="scene6">深色模式</button>
    <button class="style-btn" data-scene="scene7">通知页</button>
    <button class="style-btn" data-scene="scene8">编辑页</button>
  </div>
  
  <!-- 1. 首页带Logo -->
  <div id="scene1" class="page-scene active">
    <header class="top-nav">
      <button class="nav-btn" id="menuBtn1">
        <i class="fa fa-bars"></i>
      </button>
      <div class="nav-logo">
        <i class="fa fa-connectdevelop"></i>
        <span>社交圈</span>
      </div>
      <button class="nav-btn" id="msgBtn1">
        <i class="fa fa-envelope-o"></i>
      </button>
    </header>
    
    <div class="content">
      <div>
        <h3>首页顶部导航</h3>
        <p>包含品牌Logo、左侧菜单和右侧消息按钮</p>
      </div>
    </div>
  </div>
  
  <!-- 2. 二级页面带返回 -->
  <div id="scene2" class="page-scene">
    <header class="top-nav">
      <div class="left-section">
        <button class="nav-btn" id="backBtn2">
          <i class="fa fa-arrow-left"></i>
        </button>
        <h1 class="nav-title">个人资料</h1>
      </div>
      <button class="nav-btn" id="moreBtn2">
        <i class="fa fa-ellipsis-v"></i>
      </button>
    </header>
    
    <div class="content">
      <div>
        <h3>二级页面顶部导航</h3>
        <p>左侧带返回按钮，中间标题，右侧更多选项</p>
      </div>
    </div>
  </div>
  
  <!-- 3. 搜索优先页面 -->
  <div id="scene3" class="page-scene">
    <header class="top-nav">
      <div class="left-btns">
        <button class="nav-btn" id="cancelBtn3">
          <i class="fa fa-times"></i>
        </button>
      </div>
      <div class="search-container">
        <div class="search-bar">
          <i class="fa fa-search"></i>
          <span>搜索朋友、话题或内容...</span>
        </div>
      </div>
      <div class="right-btns">
        <button class="nav-btn" id="voiceBtn3">
          <i class="fa fa-microphone"></i>
        </button>
      </div>
    </header>
    
    <div class="content">
      <div>
        <h3>搜索优先页面顶部导航</h3>
        <p>以搜索框为中心，两侧为辅助功能按钮</p>
      </div>
    </div>
  </div>
  
  <!-- 4. 标签分类页面 -->
  <div id="scene4" class="page-scene">
    <header class="top-nav">
      <div class="tabs-container">
        <div class="nav-tabs">
          <div class="tab-item active" id="tab1">推荐</div>
          <div class="tab-item" id="tab2">关注</div>
          <div class="tab-item" id="tab3">热门</div>
          <div class="tab-item" id="tab4">附近</div>
          <div class="tab-item" id="tab5">话题</div>
        </div>
        <div class="tab-actions">
          <button class="nav-btn" id="filterBtn4">
            <i class="fa fa-filter"></i>
          </button>
        </div>
      </div>
    </header>
    
    <div class="content">
      <div>
        <h3>标签分类页面顶部导航</h3>
        <p>横向滚动的分类标签，支持内容筛选</p>
        <p>点击标签可切换内容分类</p>
      </div>
    </div>
  </div>
  
  <!-- 5. 聊天页面 -->
  <div id="scene5" class="page-scene">
    <header class="top-nav">
      <button class="nav-btn" id="backBtn5">
        <i class="fa fa-arrow-left"></i>
      </button>
      <div class="contact-info">
        <img src="https://picsum.photos/200/200?random=1" alt="联系人头像" class="avatar">
        <div>
          <div class="contact-name">张小明</div>
          <div class="contact-status">正在输入...</div>
        </div>
      </div>
      <div class="right-actions">
        <button class="nav-btn" id="phoneBtn5">
          <i class="fa fa-phone"></i>
        </button>
        <button class="nav-btn" id="videoBtn5">
          <i class="fa fa-video-camera"></i>
        </button>
      </div>
    </header>
    
    <div class="content">
      <div>
        <h3>聊天页面顶部导航</h3>
        <p>显示联系人信息、状态和沟通方式按钮</p>
      </div>
    </div>
  </div>
  
  <!-- 6. 深色模式 -->
  <div id="scene6" class="page-scene">
    <header class="top-nav">
      <button class="nav-btn" id="backBtn6">
        <i class="fa fa-arrow-left"></i>
      </button>
      <h1 class="nav-title">夜间模式</h1>
      <button class="nav-btn" id="settingsBtn6">
        <i class="fa fa-cog"></i>
      </button>
    </header>
    
    <div class="content">
      <div>
        <h3>深色模式顶部导航</h3>
        <p>深色背景设计，降低夜间视觉疲劳</p>
      </div>
    </div>
  </div>
  
  <!-- 7. 带通知的页面 -->
  <div id="scene7" class="page-scene">
    <header class="top-nav">
      <button class="nav-btn" id="backBtn7">
        <i class="fa fa-arrow-left"></i>
      </button>
      <h1 class="nav-title">通知中心</h1>
      <div>
        <button class="nav-btn btn-with-badge" id="markBtn7">
          <i class="fa fa-check-square-o"></i>
          <span class="badge">5</span>
        </button>
      </div>
    </header>
    
    <div class="content">
      <div>
        <h3>带通知的顶部导航</h3>
        <p>显示未读消息数量的徽章提示</p>
      </div>
    </div>
  </div>
  
  <!-- 8. 编辑模式 -->
  <div id="scene8" class="page-scene">
    <header class="top-nav">
      <button class="nav-btn" id="cancelBtn8">
        <i class="fa fa-times"></i>
      </button>
      <h1 class="nav-title">编辑资料</h1>
      <button class="nav-btn save-btn" id="saveBtn8">
        保存
      </button>
    </header>
    
    <div class="content">
      <div>
        <h3>编辑模式顶部导航</h3>
        <p>左侧取消按钮，右侧保存按钮</p>
      </div>
    </div>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 场景切换功能
    document.querySelectorAll('.style-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        // 更新按钮状态
        document.querySelectorAll('.style-btn').forEach(b => b.classList.remove('active'));
        this.classList.add('active');
        
        // 显示对应的场景页面
        const sceneId = this.getAttribute('data-scene');
        document.querySelectorAll('.page-scene').forEach(scene => {
          scene.style.display = 'none';
        });
        document.getElementById(sceneId).style.display = 'flex';
        document.getElementById(sceneId).style.flexDirection = 'column';
      });
    });
    
    // 标签页点击事件
    document.querySelectorAll('.tab-item').forEach(item => {
      item.addEventListener('click', function() {
        // 移除其他标签的active类
        document.querySelectorAll('.tab-item').forEach(tab => {
          tab.classList.remove('active');
        });
        
        // 为当前点击标签添加active类
        this.classList.add('active');
        
        // 模拟内容切换
        const contentText = document.querySelector('#scene4 .content p:last-child');
        contentText.textContent = `已切换到${this.textContent}分类`;
      });
    });
    
    // 导航按钮点击事件
    document.querySelectorAll('.nav-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        const icon = this.querySelector('i')?.className || this.textContent;
        let action = '';
        
        if (icon.includes('bars')) action = '菜单已打开';
        else if (icon.includes('envelope')) action = '消息中心已打开';
        else if (icon.includes('arrow-left')) action = '已返回上一页';
        else if (icon.includes('ellipsis')) action = '更多选项已打开';
        else if (icon.includes('times')) action = '已取消操作';
        else if (icon.includes('microphone')) action = '语音搜索已激活';
        else if (icon.includes('filter')) action = '筛选面板已打开';
        else if (icon.includes('phone')) action = '语音通话已发起';
        else if (icon.includes('video')) action = '视频通话已发起';
        else if (icon.includes('cog')) action = '设置页面已打开';
        else if (icon.includes('check-square')) action = '所有通知已标记为已读';
        else if (icon.includes('保存')) action = '修改已保存';
        
        // 显示操作反馈
        const sceneId = this.closest('.page-scene').id;
        const contentArea = document.querySelector(`#${sceneId} .content p:last-child`);
        if (contentArea) contentArea.textContent = action;
      });
    });
    
    // 初始化 - 隐藏所有场景，只显示默认场景
    document.querySelectorAll('.page-scene').forEach((scene, index) => {
      if (index !== 0) {
        scene.style.display = 'none';
      } else {
        scene.style.display = 'flex';
        scene.style.flexDirection = 'column';
      }
    });
  </script>
</body>
</html>